import { defineStore } from 'pinia'
import { EditorTheme } from '@/types/enum/configEnum'
import { EditorConfig } from '@/types/interfaces/configInterface'
import { ref } from 'vue'

export const useConfigStore = defineStore('config', () => {
  // ========== 编辑器配置 START ================
  const defaultConfig: EditorConfig = {
    theme: EditorTheme.dark,
    fontSize: 16,
    value: '',
    language: 'python',
    autoIndent: true,
    selectOnLineNumbers: true,
    minimap: {
      enabled: false // 是否启用预览图
    }
  }
  const editorConfig = ref<EditorConfig | null>(null)
  const getEditorConfig = (): EditorConfig => {
    if (localStorage.getItem('config')) {
      const config = localStorage.getItem('config')
      return JSON.parse(config || '') as EditorConfig
    } else {
      setEditorConfig(defaultConfig)
      return defaultConfig
    }
  }

  const setEditorConfig = (config: EditorConfig) => {
    editorConfig.value = config
    localStorage.setItem('config', JSON.stringify(config))
  }

  editorConfig.value = getEditorConfig()

  // ==================== 编辑器配置 DONE ================

  // ==================== 流程图配置 START ===============

  const defaultFlowChartConfig = {
    fill: 'white',
    'line-color': 'blcak',
    'elemnte-color': 'black'
  }
  const getFlowChartConfig = () => {
    return defaultFlowChartConfig
  }
  // ==================== 流程图配置 DONE ================
  return {
    editorConfig,
    getEditorConfig,
    setEditorConfig,
    getFlowChartConfig
  }
})
